<template>
  <div>
    <el-form :model="mobileForm" :rules="mobileFormRoles" ref="mobileForm" label-width="10em">
      <h-box header="验证手机号，激活您的非码i应用平台账号">
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="mobileForm.mobile" placeholder="仅限中国大陆手机号" style="width: 300px;">
            <template slot="prepend">+86</template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="mobileForm.code" placeholder="请输入验证码" style="width: 300px;">
            <el-button @click="handleSms(mobileForm.mobile)" :disabled="smsDisabled" slot="append" style="width: 110px;">
              <template v-if="!smsDisabled">获取验证码</template>
              <template v-else>{{ `${timer} 秒` }}</template>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item slot="footer" class="hui-mb-0">
          <el-button @click="handleActive('mobileForm')" :loading="loading" type="primary">立即激活</el-button>
        </el-form-item>
      </h-box>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      timer: 60,
      smsDisabled: false,
      mobileForm: {
        mobile: '',
        code: ''
      },
      mobileFormRoles: {
        mobile: [
          {
            required: true,
            message: '手机号必填',
            trigger: 'blur'
          },
          {
            len: 11,
            message: '手机号为 11 位长度',
            trigger: 'blur'
          },
          {
            validator: this.$validator.isMobile,
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '验证码必填',
            trigger: 'blur'
          },
          {
            len: 4,
            message: '验证码为 4 位数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 验证码倒数
    handleTimer () {
      this.smsDisabled = true
      let interval = window.setInterval(() => {
        if ((this.timer--) <= 0) {
          this.timer = 60
          this.smsDisabled = false
          window.clearInterval(interval)
        }
      }, 1000)
    },
    // 发短信
    sendSms () {
      this.$message({
        message: '验证码发送成功，请注意查收短信！',
        type: 'success'
      })
      this.handleTimer()
    },
    // 获取短信验证码事件
    handleSms (mobile) {
      this.$validator.isMobilePromise(mobile).then(res => {
        this.sendSms()
      }).catch(rej => {
        this.$message({
          message: '手机号格式不对，请重新填写',
          type: 'warning'
        })
      })
    },
    // 激活button
    handleActive (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 模拟接口提交
          this.$loading()
          this.loading = true
          setTimeout(() => {
            this.$message({
              message: '手机号验证成功！',
              type: 'success'
            })
            this.$loading().close()
            this.$router.replace({
              path: '/account/dashboard'
            })
          }, 1000)
        } else {
          this.$message({
            message: '手机号或验证码未填写',
            type: 'warning'
          })
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="less">
</style>
